import React from 'react';
import { List } from 'react-virtualized';

const VirtualList = ({ items }) => {
    // 渲染每一行的内容
    const rowRenderer = ({ index, key, style }) => (
        <div key={key} style={style}>
            {items[index]}
        </div>
    );

    return (
        <List
            width={300}
            height={300}
            rowCount={items.length}
            rowHeight={30}
            rowRenderer={rowRenderer}
        />
    );
};
const App = () => {
    // 模拟一个有100个元素的数组
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);

    return (
        <div>
            <h1>Virtual List Demo</h1>
            <VirtualList items={items} />
        </div>
    );
};

export default App;
